<template>
    <div class="lawInout">
        <el-header class="title" style="position: relative;left: 30px;top: 20px;font-size: 30px">
            <i class="el-icon-user-solid">案件收支</i>
        </el-header>
        <el-divider></el-divider>

        <div class="message">
            <div class="bg-purple">案号：<br>{{law.caseNo}}</div>
            <div class="bg-purple">代理费：<br>{{law.caseAgencyfee}}</div>
            <div class="bg-purple">已收款(已经收到的款)：<br>{{law.casePaidsal}}</div>
            <div class="bg-purple">已开发票(已经开出的发票)：<br>{{law.caseInvoiced}}</div>
        </div>

        <div class="form" style="margin-left: 20px;margin-top: 30px">
            <el-form :model="law" label-width="100px" label-position="top">
                <el-container>
                    <el-form-item label="收支类别：">
                        <el-cascader style="width: 500px;" @change="handleChange"
                                v-model="typeChecked"
                                :options="filterType"></el-cascader>
                    </el-form-item>
                    <el-form-item label="支付方式：" style="margin-left: 20px">
                        <el-select v-model="cwInout.cwPayType" :value="cwInout.cwPayType" style="width: 500px">
                            <el-option label="请选择支付方式" value=""></el-option>
                            <el-option label="转账支票" value="1"></el-option>
                            <el-option label="电汇" value="2"></el-option>
                            <el-option label="网银" value="3"></el-option>
                            <el-option label="Pos机" value="4"></el-option>
                            <el-option label="现金" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="支付金额：">
                        <el-input type="number" v-model="cwInout.cwInoutMoney" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="付款人：" style="margin-left: 20px">
                        <el-input v-model="cwInout.cwPayer" style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="备注：">
                        <el-input type="textarea" v-model="cwInout.cwRemark" style="width: 1000px;"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmitForm">确定提交</el-button>
                        <el-button @click="goBack">返回</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
        </div>
    </div>
</template>

<script>
    import CwInoutService from '../../../model/ww/cw_inout/CwInoutService.js'
    import CwInoutTypeService from '../../../model/ww/cw_inout_type/CwInoutTypeService.js'
    const cwInoutTypeService = CwInoutTypeService.getInstance()
    const cwInoutService = CwInoutService.getInstance()

    export default {
        props:['law','active'],
        data() {
            return {
                cwInout:{
                    cwInoutTypeId:'',
                    cwInoutPerson:this.law.hrEmpId,
                    cwInoutMoney:0,
                    cwPayType:'',
                    caseLawId:this.law.id,
                    cwRemark:'',
                    cwPayer:''
                },
                cwInoutType:[],
                typeChecked:[]
            }
        },
        methods:{
            goBack(){
                this.$emit('back')
            },
            //获取收支类型的方法
            getInoutType(){
                cwInoutTypeService.business().then(response => {
                    if(response.data.code === 0){
                        this.cwInoutType = response.data.data
                    }
                })
            },
            handleSubmitForm(){
                if(!cwInoutService.check(this.cwInout)){
                    return
                }
                cwInoutService.save(this.cwInout).then(response => {
                    if(response.data.code === 0){
                        this.$message.success({
                            message:'录入成功',
                            duration:1000
                        })
                        this.$emit('completed')
                    }else{
                        this.$message.error({
                            message:response.data.message,
                            duration:2000
                        })
                    }
                })
            },
            handleChange(){
                this.cwInout.cwInoutTypeId = this.typeChecked[1]
            }
        },
        computed:{
            filterType:{
                get(){
                    return this.cwInoutType.map(item => {
                        if(item.children){
                            for (let i = 0; i < item.children.length; i++) {
                                if(item.children[i].value == '100103' || item.children[i].value == '100104'){
                                    item.children.splice(i,1)
                                    i--
                                }
                            }
                        }
                        return item
                    })
                }
            }
        },
        watch:{
            law:{
                handler(){
                    this.cwInout.caseLawId = this.law.id
                    this.cwInout.cwInoutPerson = this.law.hrEmpId
                },
                deep:true
            }
        },
        created() {
            this.getInoutType()
        }
    }
</script>

<style scoped>
    .lawInout{
        width: 100%;
    }
    .message{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 8px;
    }
    .bg-purple {
        border: 1px solid gainsboro;
        width: 32%;
        padding-top: 15px;
        height: 70px;
        padding-left: 10px;
    }
</style>